<template>
	<mescroll-uni :ref="'mescrollRef'+i" @init="mescrollInit" @down="downCallback" :up="{ use: false }">
		<view style="padding: 0 30rpx;">
			<view v-for="(item, index) in dataList" :key="index" :class="['u-p-t-12', isActive(item) ? 'active-top' : '']" @click="$emit('change', item)">
				<view :class="['flex-center', `city-card${ isActive(item) ? '-active' : '' }`]">{{ item.title }}</view>
			</view>
		</view>
	</mescroll-uni>
</template>

<script>
	import { addressCountryList, addressProvinceList, addressCityList, addressAreaList } from '@/api/user/address.js'
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";

	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
		props: {
			i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
			index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
				type: Number,
				default () {
					return 0
				}
			},
			obj: {
				default: () => ({})
			},
			list: {
				default: () => ([])
			}
		},
		data() {
			return {
				dataList: [],
				timer: null
			}
		},
		watch: {
			obj: {
				handler(v, o) {
					!v.area && (this.index === this.i) && this.downCallback()
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			isActive(item = {}) {
				let index = this.i
				let { country, province, city, area } = this.obj
				if (index === 0) {
					return country && (item.countryId === country.countryId)
				} else if (index === 1) {
					return province && (item.provinceId === province.provinceId)
				} else if (index === 2) {
					return city && (item.cityId === city.cityId)
				} else if (index === 3) {
					return area && (item.areaId === area.areaId)
				}
			},
			getList() {
				let index = this.i
				let { country, province, city } = this.obj
				
				if (index === 0) {
					return addressCountryList({})
				} else if (index === 1 && country.countryId) {
					return addressProvinceList({ countryId: country.countryId })
				} else if (index === 2 && province.provinceId) {
					return addressCityList({ provinceId: province.provinceId })
				} else if (index === 3 && city.cityId) {
					return addressAreaList({ cityId: city.cityId })
				} else {
					return new Promise((res, rej) => rej({}))
				}
			},
			downCallback() {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					let node = this.$refs['mescrollRef' + this.i]
					node && node.mescroll.resetUpScroll()
					this.getList().then(res => {
						node && node.mescroll.endSuccess(res.length);
						this.dataList = res; //追加新数据
					}).catch(() => {
						node && node.mescroll.endErr();
					})
				}, 100)
			},
		}
	}
</script>

<style scoped lang="scss">
	.city {
		&-card {
			padding: 10rpx 20rpx;
			background-color: #FFFFFF;
			border-radius: 8rpx;
			
			&-active {
				@extend .city-card;
				
				color: #FFFFFF;
				background-color: #F94404;
			}
		}
	}
	
	.active {
		&-top {
			position: sticky;
			top: 0;
			left: 0;
		}
	}
</style>